<template>
    <div class="thunderAll">
        <img src="@/static/game/thunderBac.png" class="thunderBac"/>
        <div class="thuContent">
            <div class="thuCTop">
                <div class="thuItem" v-for="(item,index) in 25">
                    <div v-if="isPlaying">
                        <img src="@/static/game/thuDefalt.png" class="thuItemImg"/>
                    </div>
                    <div v-else>
                        <img src="@/static/game/thuHover.png" class="thuItemImg"/>
                    </div>
                </div>
            </div>
            <div class="thuCBtn">随机选取</div>
            <div class="thuCGoods">
                <img src="@/static/game/diamond.png" class="thuCGoodsImg"/>
                <div class="thucgNum">1</div>
                <img src="@/static/game/boom.png" class="thuCGoodsImg"/>
                <div class="thucgNum">1</div>
            </div>
            <div class="thuCStart">
                <div class="thucsL" @click="toStartThunder">开始游戏</div>
                <div class="thucsR">
                    <img src="@/static/game/thuNum.png" class="thuNum"/>
                    <div class="thucsRText">1</div>
                </div>
            </div>
            <div class="rateWrapMuChoice">
                <div class="rateWL">
                    消耗111个硬币
                    <span>( 当前倍数：22 )</span>
                </div>
                <div class="rateBtn rateBtnLeft">
                    <img src="@/static/game/rateDown.png" class="rateDown"/>
                </div>
                <div class="rateBtn">
                    <img src="@/static/game/rateUp.png" class="rateDown"/>
                </div>
            </div>
        </div>
        <div class="thundDiff" v-if="showThundDiff" @click.stop>
            <div class="tdTif">炸弹数量</div>
            <div class="tdOption">
                <div class="tdOpItem" v-for="it in 25">
                    <img src="@/static/game/thunNumItem.png" class="thunNumItem"/>
                    <div class="thunNumItemContent">
                        {{it + 1}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent, toRefs} from 'vue'
    import gameSever from "@/services/game";

    export default defineComponent({
        name: 'thunderCom',
        props: {
            list: {
                type: Array,
                default: [],
                require: true
            }
        },
        setup(props) {
            const state = {
                isPlaying:false,
                showThundDiff:true
            }
            function toStartThunder() {
                // gameSever.createThunder().then(res =>{
                //     console.log(res,'ress')
                // })
            }
            return {
                ...toRefs(state),
                toStartThunder
            }
        }
    })
</script>

<style lang="scss" scoped>
    .thunderAll {
        position: relative;

        .thunderBac {
            height: 80vh;
        }
        .thundDiff{
            position: absolute;
            bottom: 17%;
            right: 6.3%;
            background-color: #41368A;
            padding: 5% 1% 5% 5%;
            border-radius: 16px;
            width: 60%;
            min-height: 30%;
            z-index: 10;
             .tdTif{
                 color: #C6BEEC;
                 font-size: 20px;
                 font-weight: bold;
                 margin-bottom: 5%;
             }
            .tdOption{
                display: flex;
                flex-wrap: wrap;
                .tdOpItem{
                    width: 17%;
                    margin-right: 2%;
                    margin-bottom: 2%;
                    position: relative;
                   .thunNumItem{
                       width: 100%;
                   }
                   .thunNumItemContent{
                       position: absolute;
                       inset: 0;
                       border-radius: 50%;
                       display: flex;
                       align-items: center;
                       justify-content: center;
                       font-size: 22px;
                       font-weight: bold;
                   }
                }
            }
        }
        .thuContent {
            position: absolute;
            inset: 0;
            padding: 7% 5% 5% 4%;
            display: flex;
            flex-direction: column;
            .thuCTop {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                align-content: baseline;
                justify-content: space-around;
                margin-top: 2%;

                .thuItem {
                    width: 17%;
                    margin-bottom: 1%;

                    .thuItemImg {
                        width: 100%;
                    }
                }
            }

            .thuCBtn {
                background-color: #6656B9;
                height: 6%;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                color: #C6BEEC;
                margin: 0 2%;
            }

            .thuCGoods {
                flex: 1;
                height: 11%;
                background-color: #1A1250;
                display: flex;
                align-items: center;
                padding: 0 2%;
                margin: 1% 2% 1%;
                .thuCGoodsImg {
                    height: 50%;
                    margin-right: 16px;
                }

                .thucgNum {
                    margin-right: 30px;
                }
            }

            .thuCStart {
                height: 7%;
                display: flex;
                margin: 0 2%;
                .thucsL {
                    flex: 1;
                    margin-right: 12px;
                    background-color: #874AFF;
                    font-size: 20px;
                    color: #ffffff;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 6px;
                }

                .thucsR {
                  position: relative;
                    .thuNum {
                        height: 100%;
                    }
                  .thucsRText{
                     position: absolute;
                     inset: 0;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     font-weight: bold;
                     color: #A385F7;
                     font-size: 24px;
                  }
                }
            }

            .rateWrapMuChoice {
                margin: 1% 2% 0;
                height: 7%;
                background-color: #100C40;
                border-radius: 6px;
                display: flex;
                align-items: center;
                font-size: 20px;
                .rateWL {
                    flex: 1;
                    color: #FDCF41;
                    font-weight: bold;
                    padding-left: 10px;
                }

                .rateBtn {
                    width: 70px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .rateDown {
                        width: 24px;
                    }
                }

                .rateBtnLeft {
                    border-left: 1px solid #24245A;
                    border-right: 1px solid #24245A;
                }
            }
        }
    }
    @media screen and (max-width: 768px){
      .thunderAll {
        position: relative;
        .thunderBac {
            width: 95vw;
            height: 80vh;
        }
        .thuContent {
          position: absolute;
          inset: 0;
          padding: 10% 5% 7% 4%;
          .thuCTop {
            .thuItem {
              width: 18%;
              .thuItemImg {
                width: 100%;
              }
            }
          }
          .thuCBtn {
            height: 7%;
            font-size: 16px;
            color: #C6BEEC;
          }
          .thuCGoods {
            height: 14%;
            margin-top: 2%;
            margin-bottom: 2%;
            padding: 0 2%;
            .thuCGoodsImg {
              height: 50%;
              margin-right: 16px;
            }
            .thucgNum {
              margin-right: 30px;
            }
          }
          .thuCStart {
            height: 8%;
            .thucsL {
              flex: 1;
              margin-right: 8px;
              font-size: 14px;
            }
            .thucsRText{
              font-size: 18px!important;
            }
          }
          .rateWrapMuChoice {
            margin-top: 2%;
            height: 8%;
            font-size: 12px;
            .rateWL {
              padding-left: 15px;
            }
            .rateBtn {
              width: 60px;
              height: 100%;
              .rateDown {
                width: 25px;
              }
            }
          }
        }
      }
    }
    @media screen and (max-height: 668px){
         .thuContent{
             padding: 7% 5% 10% 4%!important;
         }
    }
</style>
